<template>
  <div>
    <!--我的检测加待付款那一栏-->
    <div class="menu-center">
<!--      <div class="menu-text">我的检测：</div>-->
      <div class="menu-icon">
        <van-row class="user-links">
          <van-col span="8">
<!--            pending-payment-->
            <van-icon name="gold-coin" v-on:click="redirectToOrders(0)"/>
            待付款
          </van-col>
          <van-col span="8">
<!--            tosend-->
            <van-icon name="coupon" v-on:click="redirectToOrders(1)"/>
            待寄样本
          </van-col>
          <van-col span="8">
<!--            logistics-->
            <van-icon name="info" v-on:click="redirectToOrders(2)"/>
            查看报告
          </van-col>
        </van-row>
      </div>
    </div>
<!--    <van-cell-group class="user-group">-->
<!--      <van-cell icon="records" title="全部订单" to="/orders" is-link />-->
<!--    </van-cell-group>-->
    <!--链接那一栏-->
    <div class="menu-link">
      <van-cell-group>
        <van-cell class="menu-cell" icon="user-circle-o" title="关于我们" to="/report" is-link />
        <van-cell class="menu-cell" icon="question-o" title="帮助中心" to="/help" is-link />
        <van-cell class="menu-cell" icon="setting-o" title="账号设置" to="/account" is-link />
      </van-cell-group>
    </div>
    <div class="menu-footer">

    </div>
  </div>
</template>

<script>
import { Cell, CellGroup, Row, Col } from 'vant'

export default {
  name: 'setting-menu',
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Row.name]: Row,
    [Col.name]: Col
  },
  methods: {
    redirectToOrders: function (type) {
      this.$router.push({ path: '/orders', query: { type: type } })
    }
    // redirectToOrders1: function (type) {
    //   this.$router.push({ path: '/orders', query: { type: type } })
    // },
    // redirectToOrders2: function () {
    //   this.$router.push({ path: '/orders/orders-unreceive' })
    // }
  }
}
</script>

<style lang="less" scoped>
  /*我的检测加组件*/
  .menu-center{
    padding-bottom: 15px;
    /*padding-top: 10px;*/
    font-size: 0.9rem;
    background-color: #f2f3f5;
  }
  /*我的检测*/
  .menu-text{
    margin-left: 10px;
    margin-top: 20px;
  }
  /*组件*/
  .menu-icon{
    padding-top: 15px;
    /*border-bottom:1px solid #666;//画一条分界线*/
  }
  /*组件下面三个链接*/
  .menu-link{
    margin-top: 10px;
    /*border-top:1px solid #666;//画一条分界线*/
    /*border-bottom:1px solid #666;//画一条分界线*/
  }
  .menu-cell{
    /*border-bottom:1px solid #666;//画一条分界线*/
  }
  /*链接下面空白*/
  .menu-footer{
    background-color: #f2f3f5;
    /*height: 900px;*/
  }
  icon{
    color: red;
  }
  .user {
    &-poster {
      width: 100%;
      display: block;
    }
    &-group {
      margin-bottom: 15px;
    }
    &-links {
      /*margin: 15px;*/
      border-radius:10px;
      margin-left: 15px;
      margin-right: 15px;
      padding: 15px 0;
      font-size: 12px;
      text-align: center;
      background-color: white;
      .van-icon {
        color: #1989fa;
        display: block;
        font-size: 24px;
      }
    }
  }
  .van-icon-user-circle-o:before {
    content: "\F0CB";
    color: red;
  }
  .van-icon-question-o:before {
    content: "\F0A3";
    color: green;
  }
</style>
